<template>
  <div class="list" ref="wrapper">
    <div class="content">
      <div class="item">
        <div class="item-header">热门城市</div>
        <ul class="item-main">
          <li v-for="item in hotCitys" :key="item.id" @click="cityClick(item.name)">{{item.name}}</li>
        </ul>
      </div>
      <div class="item">
        <div class="item-header">字母排序</div>
        <ul class="letter">
          <li v-for="(item,key) in cities" :key="key" @click="getLetter(key)">{{key}}</li>
        </ul>
      </div>
      <div class="item" v-for="(item,key) in cities" :key="key">
        <div class="item-header" :ref="key">{{key}}</div>
        <ul class="one-letter">
          <li v-for="city in item" :key="city.id" @click="cityClick(city.name)">{{city.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
import { mapMutations } from "vuex";
export default {
  name: "CityList",
  data() {
    return {
      currentLetter: ""
    };
  },
  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper, {
      click: true,
      tap: true,
      scrollY: true
    });
  },
  props: {
    hotCitys: Array,
    cities: {}
  },
  methods: {
    getLetter(currentLetter) {
      this.currentLetter = currentLetter;
    },
    cityClick(city) {
      // this.$store.dispatch("changeCity", city);
      // this.$store.commit("changeCity", city);
      this.changeCity(city);
      this.$router.push("/"); // 页面跳转 编程式
    },
    //通过mapMutations辅助函数，把changeCity方法映射到这个组件中，然后调用时直接传参即可触发mutation
    ...mapMutations(["changeCity"])
  },
  watch: {
    currentLetter() {
      if (this.currentLetter) {
        // 注意 这里获取到的元素是个数组，注意转换成DOM
        const element = this.$refs[this.currentLetter][0];
        this.scroll.scrollToElement(element);
      }
    }
  },
  activated() {
    this.scroll = new Bscroll(this.$refs.wrapper, {
      click: true,
      tap: true,
      scrollY: true
    });
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variables'
@import '~@/assets/style/mixins'

.list
  width: 100%
  max-width: 750px
  margin: 0 auto
  position: absolute
  left: 0
  top: 1.68rem
  bottom: 0
  right: 0
  overflow: hidden
  .item
    width: 100%
    .item-header
      height: 0.8rem
      background: #f5f5f5
      line-height: 0.8rem
      padding-left: 0.3rem
      font-size: 0.24rem
    .letter
      font-size: 0.28rem
      font-family: 'Microsoft JhengHei'
    .item-main
      display: flex
      flex-direction: row
      flex-wrap: wrap
      li
        width: 33.33333%
        text-align: center
        height: 0.9rem
        line-height: 0.9rem
        font-size: 0.28rem
        border-right: 1px solid #ddd
        border-bottom: 1px solid #ddd
      li:nth-child(3n)
        border-right: none
    .letter
      display: flex
      flex-direction: row
      flex-wrap: wrap
      padding: 0.3rem 0
      li
        width: 16.66666%
        height: 0.9rem
        line-height: 0.9rem
        text-align: center
    .one-letter
      display: flex
      flex-direction: row
      flex-wrap: wrap
      li
        width: 25%
        text-align: center
        height: 0.9rem
        line-height: 0.9rem
        font-size: 0.28rem
        border-right: 1px solid #ddd
        border-bottom: 1px solid #ddd
        updateText()
      li:nth-child(4n)
        border-right: none
</style>
